<template>
  <div>
    <my-header></my-header>
    <div class="top-block"></div>
    <mt-cell :title="title" is-link to='/notice'></mt-cell>
    <div class="userInfo">
    <div class="photo"><img :src="userInfo.touxiang ==null?'http://xmoa.hzhuishi.cn/uploads/image/noimage.jpg':userInfo.touxiang" alt=""></div>
    <div class="userTxt">
      <div class="name">{{userInfo.username}}</div>
      <div class="tel">手机号:{{userInfo.tel}}</div>
      <div class="grad" v-if="userInfo.leixing == 0">级别：玩家</div>
      <div class="grad" v-if="userInfo.leixing == 1">级别：见习顾问</div>
      <div class="grad" v-if="userInfo.leixing == 2">级别：顾问</div>
      <div class="grad" v-if="userInfo.leixing == 3">级别：高级顾问</div>
      <div class="tutor">导师：{{userInfo.upline_id}} <span v-if="userInfo.upline_ids !=null">({{userInfo.upline_ids}})</span></div>
      <div class="area">{{userInfo.dizhi}}</div>

    </div>
    </div>

    <div to="" class="wagesInfo">
      <mt-cell to='/wages' title="预计累计工资(税前)" is-link><span class="right">详情</span></mt-cell>
      <div class="flex">
        <div>
          <span>今日</span>
          <span class="money">￥{{wagesInfo.today}}</span>
        </div>
        <div>
          <span>本月</span>
          <span class="money">￥{{wagesInfo.thismonth_fee}}</span>
        </div>
        <div>
          <span>总计</span>
          <span class="money">￥{{wagesInfo.total_fee}}</span>
        </div>
      </div>
    </div>

    <div class="community">
      <div class="customer">

      <div class="title">团队</div>
      <div class="sumary">今日团队新增</div>
      <div class="customerNumber flex">
        <div class="flex-item">
          <div class="number">{{Number(teamInfos.m_num_today) + Number(teamInfos.p_num_today) + Number(teamInfos.s_num_today)}}</div>
          <div class="txt">总数</div>
        </div>
        <div class="flex-item">
          <div class="number">{{teamInfos.m_num_today}}</div>
          <div class="txt">高级</div>
        </div>
        <div class="flex-item">
          <div class="number">{{teamInfos.p_num_today}}</div>
          <div class="txt">顾问</div>
        </div>
        <div class="flex-item">
          <div class="number">{{teamInfos.s_num_today}}</div>
          <div class="txt">见习</div>
        </div>
      </div>
      <div class="hr"></div>
          <div class="sumary">团队总人数</div>
          <div class="customerNumber flex">
            <div class="flex-item">
              <div class="number">{{Number(teamInfos.m_num) + Number(teamInfos.p_num) + Number(teamInfos.s_num)}}</div>
              <div class="txt">总数</div>
            </div>
            <div class="flex-item">
              <div class="number">{{teamInfos.m_num}}</div>
              <div class="txt">高级</div>
            </div>
            <div class="flex-item">
              <div class="number">{{teamInfos.p_num}}</div>
              <div class="txt">顾问</div>
            </div>
            <div class="flex-item">
              <div class="number">{{teamInfos.s_num}}</div>
              <div class="txt">见习</div>
            </div>
          </div>
          <div class="hr"></div>
          <div class="sumary">玩家</div>
          <div class="customerNumber flex">
            <div class="flex-item">
              <div class="number">{{teamInfos.w_num}}</div>
              <div class="txt">总数</div>
            </div>
            <div class="flex-item">
              <div class="number">{{teamInfos.w_num_today}}</div>
              <div class="txt">今日新增</div>
            </div>
          </div>
          <mt-button class="seeDetail" @click='toManage'>查看社区详情<i class="mint-cell-allow-right"></i></mt-button>
      </div>
    </div>
    <div class="board">
      <div class="boardContent" @click="toNotice()">
        <div class="title">公告栏</div>
      <div class="sumary" v-for="(item,index) in newsInfo" v-if="index < 3" :key='index'>{{item.title}}<span class="right">{{new Date(parseInt(item.add_time) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ')}}</span></div>
      </div>

    </div>

    <div class="bottom-block"></div>
    <my-footer></my-footer>
  </div>
</template>

<script>

  import {index,get_wages,get_team_infos,get_news,get_bankinfo} from '@/api/';
  export default {
    data(){
      return {
        title:'',
        userInfo:'',//获取到的用户信息
        wagesInfo:'',//用户工资信息
        teamInfos:'',//团队信息
        newsInfo:'',//公告列表
        tel:''
      }
    },
    methods:{
      // 弹窗信息
      firstAlert(){
        this.tel = JSON.parse(localStorage.getItem('tel'));
        // console.log(this.tel)
        if(this.tel != ''){
          get_bankinfo({tel:this.tel}).then(res =>{
            // console.log(res)
            if(res.status == 0){
              this.$messagebox.alert('请补全银行卡信息！').then(action => {
                if(action == 'confirm'){
                  this.$router.push('/addCard');
                }
              });
              return false;
            }
          })
      }


      },
      // 获取用户信息
      getInfo(){
        index({tel:this.tel}).then(res =>{
          this.userInfo = res.data;
        })
      },
      getWages(){// 获取用户工资信息
        get_wages({tel:this.tel}).then(res =>{
          // console.log(res)
          this.wagesInfo = res.data
        })
      },
      getTeamInfos(){// 获取团队信息
        get_team_infos({tel:this.tel}).then(res =>{
          // console.log(res)
          this.teamInfos = res.data
        })
      },
      getNews(){// 获取首页公告列表
        get_news().then(res =>{
          // console.log(res)
          this.title = res.data.top_list[0].title;
          this.newsInfo = res.data.list;
        })
      },
      toManage(){
        this.$router.push('/manage');
      },
      toNotice(){
        this.$router.push('/notice');
      },
      reload(){
        location.reload()
      }
    },
    mounted(){
      this.getInfo();
      this.getWages();
      this.getTeamInfos();
      this.getNews();
    },
    created(){
      this.firstAlert();
    },
    beforeCreate() {
      if(JSON.parse(localStorage.getItem('tel')) == null){
        this.$router.push('/login');
      }
    }


  }
</script>

<style scoped>


.mint-cell{background-color: rgb(255,254,236);}
/deep/ .mint-cell-title{flex: 0 1 auto;font-size: 14px;font-weight: bold;}

.userInfo{display: flex;justify-content: space-around; align-items:center;padding: 1em 0 3em 0;background-color: #2F3953;color: #FFFFFF;}
.userInfo .photo{flex: 3;text-align: center;}
.userInfo .photo > img{width: 60px;height: 60px;border-radius: 50%;}
.userInfo .userTxt{text-align: left;flex: 7;font-size: 12px;}
.userInfo .userTxt >div{margin-top: 5px;}
.userInfo .userTxt .name{font-size: 17px;}

.wagesInfo{border-radius: 6px;background: #fff;margin-top: -2em;width: 96%;margin: 0 auto;padding-bottom: 10px;}
.wagesInfo .mint-cell .mint-cell-text{font-size: 14px;color: #333;}
.wagesInfo .mint-cell{margin-top: -2em;background: #FFFFFF;border-radius: 6px;}
.wagesInfo .mint-cell-value .right{position: absolute;right: 3em;font-size: 12px;top: 1.5em;}
.wagesInfo .flex div span{display: block;text-align: center;font-size: 12px;color: #666666;}
.wagesInfo .flex div .money{font-size: 18px;color: #ff9c4c;margin: 8px 0 0;}

.community{border-radius: 6px;width: 96%;margin: 0 auto;background: #FFFFFF;margin-top: 1em;text-align: start;}
 .customer{padding: 11px 16px;}
 .title{font-size: 14px;color: #333;}

 .number{font-size: 18px;color: #000;}
 .txt{font-size: 12px;color: #666;}
.seeDetail{border-radius: 40px;height: 30px;margin: 0 auto;margin-top: 1em; background-color: #2f3953;color: #FFFFFF;width: 110px;display: inline-block;margin-left: 50%;transform: translateX(-50%);text-align: center;line-height: 30px;font-size: 12px;}

.board{text-align: start;width: 96%;margin: 0 auto;background: #fff;}
.boardContent{padding: 11px 16px;margin: 1em 0 2em 0;}
</style>
